<template>
  <div>
    <div class="acea-row row-middle border_bottom pb-24" v-if="psInfo">
      <div class="avatar mr20"><img :src="psInfo.user.avatar"></div>
      <div class="dashboard-workplace-header-tip">
      <p class="dashboard-workplace-header-tip-title" v-text="psInfo.user.nickname || '-'"></p>
      <div class="dashboard-workplace-header-tip-desc">
      <span class="dashboard-workplace-header-tip-desc-sp pb-1">积分: {{ psInfo.integralCount }}</span>
      <span class="dashboard-workplace-header-tip-desc-sp pb-1">总计随手拍: {{ psInfo.allCount }}</span>
      <span class="dashboard-workplace-header-tip-desc-sp">本月随手拍: {{ psInfo.monthCount }}</span>
      </div>
      </div>
    </div>
    <el-row align="middle" :gutter="10" class="ivu-mt mt20">
      <el-col :span="4">
        <el-menu
          default-active="0"
          class="el-menu-vertical-demo"
          @select="changeType"
        >
          <el-menu-item :name="item.val" v-for="(item, index) in list" :key="index" :index="item.val">
            <span slot="title">{{item.label}}</span>
          </el-menu-item >
        </el-menu>
      </el-col>
      <el-col :span="20">
        <el-table :data="tableData.data" class="tabNumWidth"  v-loading="loading" max-height="400">
          <el-table-column
            :prop="item.key"
            :label="item.title"
            width="item.minWidth"
            :show-overflow-tooltip="true"
            v-for="(item, index) in columns" :key="index"
          />
        </el-table>
        <div class="block">
          <el-pagination
            :page-sizes="[6, 12, 18, 24]"
            :page-size="tableFrom.limit"
            :current-page="tableFrom.page"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.total"
            @size-change="handleSizeChange"
            @current-change="pageChange"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { infobyconditionApi, topdetailApi } from '@/api/user'
  export default {
    name: "UserDetails",
    props:{
      uid: {
        type: Number,
        default: null
      }
    },
    data() {
      return {
        loading: false,
        columns: [],
        Visible: false,
        list: [
          { val: '0', label: '积分明细' },
          { val: '1', label: '登录记录' },
        ],
        tableData: {
          data: [],
          total: 0
        },
        tableFrom: {
          page: 1,
          limit: 6,
          type : '0',
          userId : ''
        },
        psInfo: null
      }
    },
    mounted(){
      if(this.uid){
        this.getHeader()
        this.changeType(this.tableFrom.type)
      }

    },
    methods: {
      changeType(key) {
        this.tableFrom.type = key
        if(key === '0'){
          this.integral()
        }else{
          this.getInfo()
        }
      },
      integral() {
        this.loading = true
        //integralListApi({ limit:this.tableFrom.limit, page: this.tableFrom.page}, {uid:this.uid}).then(res => {
        //后期接口调用
        let res = {"page":1,"limit":6,"totalPage":2,"total":6,"list":[
            {
              "id": 6,
              "title": "核销",
              "integral": "-11.00",
              "balance": "0.00",
              "updateTime": "2023-03-21 15:54:17",
              "mark": "",
            },
            {
              "id": 5,
              "title": "立案受理",
              "integral": "+4.00",
              "balance": "11.00",
              "updateTime": "2023-03-21 15:53:17",
              "mark": "",
            },
            {
              "id": 4,
              "title": "提交随手拍",
              "integral": "+1.00",
              "balance": "7.00",
              "updateTime": "2023-03-21 15:51:56",
              "mark": "",
            },
            {
              "id": 3,
              "title": "提交随手拍",
              "integral": "+1.00",
              "balance": "6.00",
              "updateTime": "2023-03-21 15:32:01",
              "mark": "",
            },
            {
              "id": 2,
              "title": "立案受理",
              "integral": "+4.00",
              "balance": "5.00",
              "updateTime": "2023-03-21 13:41:44",
              "mark": "",
            },
            {
              "id": 1,
              "title": "提交随手拍",
              "integral": "+1.00",
              "balance": "1.00",
              "updateTime": "2023-03-21 13:40:17",
              "mark": "",
            }
          ]};

          this.tableData.data = res.list
          this.tableData.total = res.total
          this.columns = [
            {
              title: '来源/用途',
              key: 'title',
              minWidth: 120
            },
            {
              title: '积分变化',
              key: 'integral',
              minWidth: 120
            },
            {
              title: '变化后积分',
              key: 'balance',
              minWidth: 120
            },
            {
              title: '日期',
              key: 'updateTime',
              minWidth: 120
            },
            {
              title: '备注',
              key: 'mark',
              minWidth: 120
            }
          ]
          this.loading = false
        /*}).catch(res => {
          this.loading = false
        })*/
      },
      getInfo() {
        this.tableFrom.userId = this.uid
        this.loading = true
        //infobyconditionApi(this.tableFrom).then(res => {
        //后期接口调用
        let res = {"page":1,"limit":6,"totalPage":0,"total":0,"list":[
            {
              "id": 2,
              "lastLoginTime": "2023-03-21 13:41:44",
              "lastLoginIp": "42.94.250.190",
              "mark": "",
            },
            {
              "id": 1,
              "lastLoginTime": "2023-03-20 23:22:03",
              "lastLoginIp": "42.94.250.190",
              "mark": "",
            },
          ]};

          this.tableData.data = res.list
          this.tableData.total = res.total
          switch (this.tableFrom.type) {
            case '1':
              this.columns = [
                {
                  title: '近次登录时间',
                  key: 'lastLoginTime',
                  minWidth: 120
                },
                {
                  title: '近次登录IP',
                  key: 'lastLoginIp',
                  minWidth: 120
                },
                {
                  title: '备注',
                  key: 'mark',
                  minWidth: 120
                },
              ]
              break;
          }
          this.loading = false
        /*}).catch(() => {
          this.loading = false
        })*/
      },
      pageChange(page) {
        this.tableFrom.page = page
        if(this.tableFrom.type === '0'){
          this.integral()
        }else{
          this.getInfo()
        }
      },
      handleSizeChange(val) {
        this.tableFrom.limit = val
        if(this.tableFrom.type === '0'){
          this.integral()
        }else{
          this.getInfo()
        }
      },
      getHeader() {
        //topdetailApi({userId : this.uid}).then(res => {
        //后期接口调用
        let res = {"user":{"uid":7933,"account":"15812980822","realName":"","birthday":"","cardId":"","mark":"","partnerId":null,"groupId":"","tagId":"","nickname":"b1f372d99453","avatar":"https://api.java.crmeb.net/crmebimage/store/2020/08/15/adae23e354114cd5bd8f3cae740741c23opxeh8kw2.jpg","phone":"15812980822","sex":0,"country":"CN","addIp":"","lastIp":"","nowMoney":"0.00","brokeragePrice":"0.00","integral":0,"experience":0,"signNum":0,"status":true,"level":0,"spreadUid":0,"spreadTime":null,"userType":"h5","isPromoter":false,"payCount":0,"spreadCount":0,"addres":"","adminid":0,"loginType":"","updateTime":"2022-10-25 00:15:13","createTime":"2022-10-25 00:15:13","lastLoginTime":"2022-10-25 00:15:13","cleanTime":null,"path":"/0/","subscribe":false,"promoterTime":null},"balance":"0.00","integralCount":0,"allCount":3,"monthCount":3,"allConsumeCount":"0","mothConsumeCount":"0"};

          this.psInfo = res
        //})
      }
    }
  }
</script>

<style scoped lang="scss">
  .avatar{
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    margin-left: 18px;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .dashboard-workplace {
    &-header {
      &-avatar {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        margin-right: 16px;
        font-weight: 600;
      }

      &-tip {
        width: 82%;
        display: inline-block;
        vertical-align: middle;
        margin-top: -12px;
        &-title {
          font-size: 13px;
          font-weight: 600;
          color: rgba(0, 0, 0, 0.85);
          line-height: 18px;
          padding: 10px 0 10px;
        }

        &-desc {
          &-sp {
            width: 32%;
            color: #17233D;
            font-size: 13px;
            display: inline-block;
          }
        }
      }

      &-extra {
        .ivu-col {
          p {
            text-align: right;
          }

          p:first-child {
            span:first-child {
              margin-right: 4px;
            }

            span:last-child {
              color: #808695;
            }
          }

          p:last-child {
            font-size: 22px;
          }
        }
      }
    }
  }
  .pb-1{
    padding-bottom: 10px;
  }
  .mr20{
    margin: 0 20px;
  }
  .border_bottom{
    border-bottom: 1px solid #E7EAEC;
  }
  .pb-24{
    padding-bottom: 24px;
  }
</style>
